<!-- 富文本编辑器 -->

<template>
    <div>
        <!-- 使用el-upload来代替quill-editor的img图片上传  -->
        <el-upload class="uploader" action="getActionUrl" name="file" :show-file-list="false" :on-success="uploadSuccess"
            :on-error="uploadError" :before-upload="beforeUpload">
        </el-upload>

        <quill-editor class="editor" :modelValue="value" ref="myQuillEditor" :options="editorOption"
            @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
        </quill-editor>
    </div>
</template>


<script>

// 引入vue-quill-editor
import { QuillEditor, Quill } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
// import 'quill/dist/quill.core.css'
// import 'quill/dist/quill.snow.css'
// import 'quill/dist/quill.bubble.css'
import { ImageDrop } from 'quill-image-drop-module';
import 'quill-image-resize-module/image-resize.min.js';
// import imageResize from 'quill-image-resize-module';
Quill.register('modules/ImageDrop', ImageDrop);
// Quill.register('modules/imageResize', imageResize);
// 引入quill
// import Quill from 'quill'
// import "quill-image-resize-module/image-resize.min.js"
// // 引入vue-quill-editor的图片上传功能
// import ImageResize from 'quill-image-resize-module'
// // 注册quill-image-resize-module
// Quill.register('modules/imageResize', ImageResize)

// 为quill-editor添加工具栏选项
const toolBarOptions = [
    // 加粗、斜体、下划线、删除线
    ["bold", "italic", "underline", "strike"],
    // 引用 、代码块
    ["blockquote", "code-block"],
    // 1、2级标题
    [{ header: 1 }, { header: 2 }],
    // 有序、无序列表
    [{ list: "ordered" }, { list: "bullet" }],
    // 上标、下标
    [{ script: "sub" }, { script: "super" }],
    // 缩进-1、缩进+1
    [{ indent: "-1" }, { indent: "+1" }],
    // 字体大小
    [{ size: ["small", false, "large", "huge"] }],
    // 标题
    [{ header: [1, 2, 3, 4, 5, 6, false] }],
    // 字体颜色、字体背景颜色
    [{ color: [] }, { background: [] }],
    // 字体种类
    [{ font: [] }],
    // 对齐方式
    [{ align: [] }],
    // 清除文本格式
    ["clean"],
    // 链接、图片、视频
    ["link", "image", "video"]
]

export default {
    name: 'Editor',
    components: { QuillEditor },

    // 定义props，此为对象属性
    // 富文本的值，上传的地址，图片的大小
    props: {
        value: {
            type: String
        },
        action: {
            type: String
        }
    },

    data() {
        return {
            // 富文本的值
            content: this.value,

            quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示

            // 富文本编辑器配置
            editorOption: {
                placeholder: '',
                theme: 'snow', // or 'bubble'
                modules: {
                    toolbar: {
                        // 工具栏选项
                        container: toolBarOptions,
                        // 处理函数
                        handlers: {
                            // 处理图片上传
                            image: function (value) {
                                // value：true / false
                                if (value) {
                                    // 调用图片上传的方法
                                    document.querySelector('.uploader input').click()
                                } else {
                                    // 移除图片
                                    this.quill.format('image', false);
                                }
                            }
                        }
                    }
                }
            }
        }
    },
    computed: {
        // 处理图片上传的地址
        getActionUrl() {

        }
    },
    methods: {
        onEditorBlur() {
            // 失去焦点事件
        },
        onEditorFocus() {
            // 获得焦点事件
        },
        // 内容改变事件
        onEditorChange() {
            /* 
            这里实际上的格式是<blockquote>dsaf asdfaf</blockquote><h2>asdf</h2>
            所以数据库中使用longtext就好了 
            */

            // 向父级传递文本改变的数据
            this.$emit('input', this.value);
        },
        // 富文本图片上传前
        beforeUpload() {
            this.quillUpdateImg = true;
        },
        uploadSuccess(res, file) {
            console.log("res：" + res);
            console.log("file：" + file);
            // // res为图片服务器返回的数据
            // // 获取富文本组件实例
            // let quill = this.$refs.myQuillEditor.quill;
            // // 如果上传成功
            // if (res.code == 200) {
            //     // 获取光标所在位置
            //     let length = quill.getSelection().index;
            //     // 插入图片  res.url为服务器返回的图片地址
            //     quill.insertEmbed(length, 'image', res.url);
            //     // 调整光标到最后
            //     quill.setSelection(length + 1);
            // } else {
            //     this.$message.error('图片插入失败');
            // }
            // // loading动画消失
            // this.quillUpdateImg = false;
        },
        uploadError() {
            // loading动画消失
            this.quillUpdateImg = false;
            this.$message.error('图片插入失败');
        }
    }
}
</script>


<style scoped></style>


